/**
 * 隐性成本图
 */
import React  from 'react'
import style from './index.less'
import { IECharts} from '../../../../../components'

const TrendChart=({
	data
})=>{
	const xData=data.xaixs.data,
				myData=data.data
		const lineWidth=2
	  const series=[],legend=[]
	  myData.map((item,i)=>{
	    legend.push(item.name)
	    series.push({
	      name:item.name,
	      type: 'line',
	      data: item.data,
	      symbol:"circle",
	      // stack:'总量',
	      symbolSize:8,
	      lineStyle:{
	        normal:{
	          width:lineWidth
	        },
	        emphasis:{
	          width:lineWidth
	        }
	      }
	    })
	  })


		const myProps= {
			option: {
		    color:['#4990e2','#4fb8ff','#a990ff'],
		    tooltip: {
		      trigger: 'axis'
		    },
		    legend: {
		      // orient: 'vertical',
		      // left: 'right',
		      top: '5%',
		      right:'5%',
		      data: legend
		    },
		    grid: {
		      left: '3%',
		      right: '5%',
		      bottom: '10%',
		      top:'16%',
		      containLabel: true
		    },
		    xAxis: {
		      type: 'category',
		      boundaryGap: false,
		      data: xData,
		      axisTick: {
		        alignWithLabel: true,
		        show:false
		      },
		      axisLine:{
		        show:false
		      }
		    },
		    yAxis: {
		      type: 'value',
		      min: function(value) {
		          return  value.min
		      },
		      max: function(value) {
		          return value.max
		      },
		      axisTick: {
		        alignWithLabel: true,
		        show:false
		      },
		      axisLine:{
		        show:false
		      }
		    },
		    series:series
		  }
	  }

	return (
		<div className={`chart ${style.trendChart}`}>
			<IECharts {...myProps} resizable={true}/>
		</div>
	)

}

TrendChart.propTypes={
	// data
}

export default TrendChart
